<template>
  <div class="info-box">

    <div v-for="(item, index) in list" :key="item.id">
      <div class="top-box">
        <span>{{ item.text }}</span>
        <span style="margin-left: 5px;">{{ item.type }}|------|{{ item.describe }}</span>
      </div>
      <div class="bottom-box">
        <span>
          ------{{ item.pos }}------
        </span>
           <span style="font-size: 8px;">{{ item.time }}</span>   
      </div>
    </div>

  </div>
</template>
<script setup>
import { ref, computed, onBeforeMount } from "vue";
import './list.scss'
import emitt from '@/utils/eventBus';
import db from "@/data/db.js";

// 初始化数据方法
let initdata = () => {
  db.forEach(item => {
    item.text = classleval[item.level];
  });
}
// 展示数据的逻辑操作
// 计算属性
let list = computed(() => {
let temps = db.filter(item => {
  return (item.state == state.value) && (type.value === "全部类型" ? true : item.type == type.value) && (pos.value === "" ? true : item.pos.includes(pos.value));

});

console.log("temps", temps);
return temps;
})

onBeforeMount(() => {
  initdata();
})

let classleval = {
  1: "一级",
  2: "二级",
  3: "三级",
}


// 定义响应式数据
let state = ref("pending");
// 兄弟组件传递过来的数据
emitt.on("changeState", (val) => {
  state.value = val;
  console.log("state.value", state.value);
})
// 定义响应式数据
let type = ref("全部类型");
// 兄弟组件传递过来的数据
emitt.on("changeType", (val) => {
  console.log("changeType", val);
  type.value = val;
})
// 定义响应式数据
let pos = ref("");
// 兄弟组件传递过来的数据
emitt.on("changePos", (val) => {
  console.log("changePos", val);
  pos.value = val;
})

</script>

